<template>
<div class="distributor-vip-setting views-container">
    <div class="wlm-form">
        <div class="wlm-form-header">佣金设置</div>
        <div class="wlm-form-content">
            <el-form :ref="formFormatData.key" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="140px" class="retail-form" label-position="right">
                <el-form-item label="是否参与分销">
                    <el-radio-group v-model="formFormatData.formData.is_distribution">
                        <el-radio :label="1">参与</el-radio>
                        <el-radio :label="0">不参与</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否开启单独分销" v-show="formFormatData.formData.is_distribution!==0">
                    <el-radio-group v-model="formFormatData.formData.is_ind_dealer">
                        <el-radio :label="0">默认规则</el-radio>
                        <el-radio :label="1">单独设置</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="分销佣金类型" v-show="formFormatData.formData.is_distribution!==0&&formFormatData.formData.is_ind_dealer==1">
                    <el-radio-group v-model="formFormatData.formData.dealer_money_type">
                        <el-radio :label="10">百分比</el-radio>
                        <el-radio :label="20">固定金额</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="" v-show="formFormatData.formData.is_distribution==1">
                    <el-table v-show="formFormatData.formData.is_ind_dealer==1" :data="formFormatData.formData.dealer" style="width: 100%">
                        <el-table-column label="商品规格">
                            <template slot-scope="scope">
                                <p class="leave-item"> {{formFormatData.formData.card_title || '-'}}</p>
                            </template>
                        </el-table-column>
                        <el-table-column label="价格">
                            <template slot-scope="scope">
                                <p class="orders-red leave-item"> {{formFormatData.formData.card_price || '-'}}</p>
                            </template>
                        </el-table-column>
                        <el-table-column label="分销商等级名称">
                            <template slot-scope="scope">
                                <span>{{scope.row.leave_title}}</span>
                                <el-tag style="margin-left:10px;" v-show="scope.$index==0">默认等级</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="一级佣金比例">
                            <template slot-scope="scope">
                                <div class="flex-col">
                                    <div class="leave-item">
                                        <el-input v-if="formFormatData.formData.dealer_money_type==10" @blur="notZero(scope.row.first_money,'scale')" @input.native="clearNativeReg(scope.row.first_money,'scale',-1,100,0.01)"  v-model="scope.row.first_money.scale" style="width:120px;margin-right:6px;">
                                            <template slot="append">%</template>
                                        </el-input>
                                        <el-input v-if="formFormatData.formData.dealer_money_type==20" @blur="notZero(scope.row.first_money,'money')" @input.native="clearNativeReg(scope.row.first_money,'money',-1,-1,0.01)" v-model="scope.row.first_money.money" style="width:120px;margin-right:6px;">
                                            <template slot="append">元</template>
                                        </el-input>
                                        <!-- <el-button type="text" icon="el-icon-edit" @click="batchEdit(scope.row.sku,'first_money')" v-if="index==0"></el-button> -->
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="二级佣金比例" v-if="commission_level==2||commission_level==3">
                            <template slot-scope="scope">
                                <div class="flex-col">
                                    <div class="leave-item">
                                        <el-input v-if="formFormatData.formData.dealer_money_type==10" @blur="notZero(scope.row.second_money,'scale')" @input.native="clearNativeReg(scope.row.second_money,'scale',-1,100,0.01)" v-model="scope.row.second_money.scale" style="width:120px;margin-right:6px;">
                                            <template slot="append">%</template>
                                        </el-input>
                                        <el-input v-if="formFormatData.formData.dealer_money_type==20" @blur="notZero(scope.row.second_money,'money')" @input.native="clearNativeReg(scope.row.second_money,'money',-1,-1,0.01)" v-model="scope.row.second_money.money"  style="width:120px;margin-right:6px;">
                                            <template slot="append">元</template>
                                        </el-input>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="三级佣金比例" v-if="commission_level==3">
                            <template slot-scope="scope">
                                <div class="flex-col">
                                    <div class="leave-item">
                                        <el-input v-if="formFormatData.formData.dealer_money_type==10" @blur="notZero(scope.row.third_money,'scale')" @input.native="clearNativeReg(scope.row.third_money,'scale',-1,100,0.01)" v-model="scope.row.third_money.scale" style="width:120px;margin-right:6px;">
                                            <template slot="append">%</template>
                                        </el-input>
                                        <el-input v-if="formFormatData.formData.dealer_money_type==20" @blur="notZero(scope.row.third_money,'money')" @input.native="clearNativeReg(scope.row.third_money,'money',-1,-1,0.01)"  v-model="scope.row.third_money.money" style="width:120px;margin-right:6px;">
                                            <template slot="append">元</template>
                                        </el-input>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>

                    <el-table v-show="formFormatData.formData.is_ind_dealer==0&&levelData" :data="levelData" style="width: 100%">
                        <el-table-column label="分销商等级名称">
                            <template slot-scope="scope">
                                <span>{{scope.row.leave_title}}</span>
                                <el-tag style="margin-left:10px;" v-show="scope.$index==0">默认等级</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="一级佣金比例">
                            <template slot-scope="scope">
                                <span v-show="scope.row.leave!=0">{{scope.row.leave_commission_1}}%</span>
                                <span v-show="scope.row.leave==0&&scope.row.dealer_money_type==10">{{scope.row.leave_commission_1}}%</span>
                                <span v-show="scope.row.leave==0&&scope.row.dealer_money_type==20">￥{{scope.row.leave_commission_1}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="二级佣金比例" v-if="commission_level==2||commission_level==3">
                            <template slot-scope="scope">
                                <span v-show="scope.row.leave!=0">{{scope.row.leave_commission_2}}%</span>
                                <span v-show="scope.row.leave==0&&scope.row.dealer_money_type==10">{{scope.row.leave_commission_2}}%</span>
                                <span v-show="scope.row.leave==0&&scope.row.dealer_money_type==20">￥{{scope.row.leave_commission_2}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="三级佣金比例" v-if="commission_level==3">
                            <template slot-scope="scope">
                                <span v-show="scope.row.leave!=0">{{scope.row.leave_commission_3}}%</span>
                                <span v-show="scope.row.leave==0&&scope.row.dealer_money_type==10">{{scope.row.leave_commission_3}}%</span>
                                <span v-show="scope.row.leave==0&&scope.row.dealer_money_type==20">￥{{scope.row.leave_commission_3}}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <div v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
        <el-button size="small" @click="formFormatSubmit({ router: { type: 'replace', path: '/distribution/distributorVip', code: 1 }})" type="primary">保存</el-button>
        <router-link tag="span" to="/distribution/distributorVip">
            <el-button size="small">返回</el-button>
        </router-link>
    </div>
</div>
</template>

<script>
import {
  LeaveList
} from '@/api/distribution'
import {
  dealerMemberDetail,
  saveMemberDealerSet
} from '@/api/application'
import mixins from '@/mixins/mixins'
import ChooseFiles from '@/components/ChooseFiles/index'
export default {
  mixins: [mixins.getters('Form')],
  name: 'DistributorVipSetting',
  components: {
    ChooseFiles
  },
  directives: {

  },
  created() {
    LeaveList().then((response) => {
      const {
        data: {
          data: msgData = []
        }
      } = response
      this.levelData = msgData.data
      this.levelData.unshift(msgData.default_leave)
      this.commission_level = msgData.commission_level
      console.log(this.levelData)
    })
  },
  data() {
    return {
      levelData: [],
      commission_level: '',
      levelDefaultData: [],
      formFormatData: {
        key: 'userForm',
        api: {
          editForm: {
            api: dealerMemberDetail,
            params: {
              card_id: ''
            },
            redirect: 'card_id'
          },
          submitForm: saveMemberDealerSet
        },
        formData: {
          ids: [],
          card_title: '',
          card_price: '',
          extension_text: '',
          extension_img: [],
          is_distribution: 1,
          is_ind_dealer: 1,
          dealer_money_type: 10,
          //   sku: [],
          spec_type: '',
          dealer: []
        },
        rules: {
        }
      }
    }
  },
  methods: {
    batchEdit(scopeRow, name) {
      if (this.formFormatData.formData.dealer_money_type === 10) {
        scopeRow.map(item => {
          console.log(item[`${name}`]['scale'])
          item[`${name}`]['scale'] = scopeRow[0][`${name}`]['scale']
        })
      } else {
        scopeRow.map(item => {
          console.log(item[`${name}`]['money'])
          item[`${name}`]['money'] = scopeRow[0][`${name}`]['money']
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.distributor-vip-setting {
    .mar-b-10 {
        margin-bottom: 10px;
    }

    .leave-item {
        min-height: 36px;
    }
}
</style>
